<template>
	<view class="container">
		<use-navbar ref="navbar" title="优惠券领取"></use-navbar>
		<view class="padding-lr">
			<view class="coupon-area border-radius margin-top-sm bg-main">
				<view class="dflex-b">
					<view class="left pos-a h-full dflex-c dflex-flow-c">
						<view>
							<text class="price fs-big">{{formData.price/100}}</text>
						</view>
					</view>
					<view class="right padding left_t flex1">
						<view class="dflex-b padding-bottom-xs">
							<view class="fwb fs">{{formData.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="border-radius margin-top-sm">
			<use-list-title title="领取号码" iconfont=" " @goto="toEdit('mobile', '领取号码', 11)"
				:tip="mobile || '未填写'"></use-list-title>
		</view>
		<view class="btn-container dflex-b margin-lr  border-radius-big" style="margin-top: 50rpx;">
			<view class="tac padding-tb-sm flex1 bg-base" @click="toExchange">立即领取</view>
		</view>
		<use-popup v-model="editShow" bgclass=" " mode="top">
			<view class="oper-area border-radius bg-main pos-r">
				<view class="pos-a pos-top pos-right padding-sm" @click="editShow = false">
					<view class="iconfont iconguanbi"></view>
				</view>
		
				<view class="dflex-b ft-dark fs-xs margin-bottom-sm margin-lr-xs">
					<view>修改{{editTxt}}</view>
					<view>{{editVal.length}}/{{editMaxLength}}</view>
				</view>
				<view class="dflex border-radius-sm field" style="padding: 18rpx 16rpx">
					<textarea class="fwb fs-sm" type="text" v-model="editVal" auto-height disable-default-padding
						style="max-height: 160rpx; min-height: 40rpx; height: 40rpx; font: initial;" :focus="editShow"
						confirm-type="done" :show-confirm-bar="false" cursor-spacing="20" placeholder="请输入"
						placeholder-class="fs-sm" :maxlength="editMaxLength" @confirm="editConfirm" />
				</view>
		
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="editConfirm">
					提交
				</view>
			</view>
		</use-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member']),
		},
		data() {
			return {
				id: '',
				formData:{
					price:0
				},
				editShow: false,
				editKey: '',
				editVal: '',
				editTxt: '',
				editMaxLength: 30,
				mobile: '',
			}
		},
		onLoad(options) {
			if (options) {
				if (options.id) {
					this.id = options.id;
				}
			}
			if (!this.id) {
				this.$api.msg('优惠券ID无效');
				return;
			}
			this.loadData()
		},
		methods: {
			toEdit(key, txt, len) {
				this.editShow = true;
				this.editKey = key;
				this.editTxt = txt;
				this.editMaxLength = len;
			},
			loadData() { 
				this.$func.wmzmall.call('member/get_coupon', {
					id:this.id
				}).then(res => { 
					if (res.code === 200) {
						this.formData=res.datas.data[0]
					} 
				});
			
			},
			editConfirm() {
				let data = {};
				data[this.editKey] = this.editVal.replace(/\n/g, '').replace(/\r\n/g, '').trim();
				if (!data[this.editKey]) {
					this.$api.msg('请填写' + this.editTxt);
					return;
				}
				this.mobile = data[this.editKey]
				this.editShow = false;
				this.editVal = '';
			},
			toExchange() {
				if (!this.islogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if(!this.mobile){
					this.$api.msg('请输入领取手机号码');
					return;
				}
				this.$func.wmzmall.call('member/receive_coupon', {
					id:this.id,
					mobile:this.mobile
				}).then(res => { 
					if (res.code === 200) {
						this.$api.alert('优惠券领取成功',function(){
							uni.navigateTo({
								url:'/sub-user/pages/coupon/coupon'
							})
						})
					
					} else{
						this.$api.alert(res.msg,function(){
							uni.switchTab({
								url:'/pages/tabbar/user'
							})
						})
						
					}
				});
				
			}
		}
	}
</script>


<style lang="scss">
	page,
	.container {
		min-height: 100%;
		background: $page-color-base;
	}

	.container {
		padding-top: 7vh;
	}

	/* 优惠券状态区 */
	.navbar-area {
		top: 0;
		white-space: nowrap;

		.state-area {
			height: 7vh;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			z-index: 10;
		}

		.nav-item {
			flex: 1;

			&.active {
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: 0;
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	/* 优惠券轮播区 */
	.swiper-area {
		height: 93vh;
	}

	.coupon-area {
		position: relative;

		&:last-child {
			margin-bottom: 20rpx;
		}

		.left {
			background-color: $base-color;
			color: #fff;
			width: 30%;

			.price {
				color: #fff !important;
			}
		}

		.right {
			margin-left: 30%;
		}

		.border-line {
			border-bottom: 1px dotted #ededed;
		}

		.discount {
			color: #fff;
		}
	}

	.disabled {
		.left {
			background-color: #d9d9d9;
			color: #b2b2b2 !important;

			.price {
				color: #b2b2b2 !important;
			}
		}

		.iconfont {
			position: absolute;
			top: 0rpx;
			right: 30rpx;
			font-size: 110rpx;
		}
	}

	.btn-container {
		left: 20rpx;
		right: 20rpx;
		bottom: 0;
	}
	.oper-area {
		width: 80vw;
		padding: 80rpx;
		padding-top: 100rpx;
		margin-top: 20vh;
		margin-left: 10vw;
	
		.field {
			background-color: #f5f5f5;
		}
	}
</style>